<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-title">Picker 选择器</view>
			<view class="smart-page-head-subtitle">多种选择器样式展示</view>
		</view>
		
		<view class="smart-padding-wrap">
			<!-- 普通选择器 -->
			<view class="section">
				<view class="section-title">
					<text class="section-icon">📱</text>
					<text class="section-text">普通选择器</text>
				</view>
				<view class="card">
					<view class="card-item">
						<view class="card-item-label">
							<text class="label-text">当前选择</text>
							<text class="label-desc">选择您所在的国家</text>
						</view>
						<view class="card-item-content">
							<picker @change="bindPickerChange" :range="array" :value="index" range-key="name">
								<view class="picker-content">
									<text class="picker-value">{{ array[index].name }}</text>
									<text class="picker-arrow">›</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<!-- 日期选择器 -->
			<view class="section">
				<view class="section-title">
					<text class="section-icon">📅</text>
					<text class="section-text">日期选择器</text>
				</view>
				<view class="card">
					<view class="card-item">
						<view class="card-item-label">
							<text class="label-text">当前选择</text>
							<text class="label-desc">选择出生日期</text>
						</view>
						<view class="card-item-content">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="picker-content">
									<text class="picker-value">{{ date }}</text>
									<text class="picker-arrow">›</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<!-- 时间选择器 -->
			<view class="section">
				<view class="section-title">
					<text class="section-icon">⏰</text>
					<text class="section-text">时间选择器</text>
				</view>
				<view class="card">
					<view class="card-item">
						<view class="card-item-label">
							<text class="label-text">当前选择</text>
							<text class="label-desc">选择预约时间</text>
						</view>
						<view class="card-item-content">
							<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
								<view class="picker-content">
									<text class="picker-value">{{ time }}</text>
									<text class="picker-arrow">›</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	
	export default {
		data() {
			return {
				array: [{
					name: '中国'
				}, {
					name: '美国'
				}, {
					name: '日本'
				}, {
					name: '巴西'
				}],
				index: 0,
				date: getDate(),
				startDate: getDate('start'),
				endDate: getDate('end'),
				time: '12:01'
			};
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value;
			}
		}
	};
</script>

<style>
	.smart-page {
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			min-height: 100vh;
			padding: 30rpx;
		}
		
		.smart-page-head {
			text-align: center;
			margin-bottom: 60rpx;
			padding: 40rpx 0;
		}
		
		.smart-page-head-title {
			font-size: 48rpx;
			font-weight: 700;
			color: #2c3e50;
			margin-bottom: 16rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		
		.smart-page-head-subtitle {
			font-size: 28rpx;
			color: #7f8c8d;
			font-weight: 400;
		}
		
		.section {
			margin-bottom: 50rpx;
		}
		
		.section-title {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 0 20rpx;
		}
		
		.section-icon {
			font-size: 36rpx;
			margin-right: 20rpx;
		}
		
		.section-text {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
		}
		
		.card {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 0 30rpx;
			box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(20rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.2);
		}
		
		.card-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #f1f2f6;
		}
		
		.card-item:last-child {
			border-bottom: none;
		}
		
		.card-item-label {
			flex: 1;
		}
		
		.label-text {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			color: #2c3e50;
			margin-bottom: 8rpx;
		}
		
		.label-desc {
			display: block;
			font-size: 24rpx;
			color: #95a5a6;
		}
		
		.card-item-content {
			flex: 0 0 auto;
		}
		
		.picker-content {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background: #f8f9fa;
			border-radius: 16rpx;
			border: 2rpx solid #e9ecef;
			transition: all 0.3s ease;
			min-width: 240rpx;
		}
		
		.picker-content:active {
			background: #e9ecef;
			transform: scale(0.98);
		}
		
		.picker-value {
			font-size: 30rpx;
			color: #34495e;
			font-weight: 500;
			margin-right: 20rpx;
		}
		
		.picker-arrow {
			font-size: 36rpx;
			color: #bdc3c7;
			font-weight: 300;
			transform: scale(1.2, 1);
		}
		
		@media (max-width: 750rpx) {
			.smart-page {
				padding: 20rpx;
			}
			
			.card-item {
				flex-direction: column;
				align-items: flex-start;
			}
			
			.card-item-content {
				width: 100%;
				margin-top: 20rpx;
			}
			
			.picker-content {
				width: 100%;
				justify-content: space-between;
			}
		}
</style>